Skip to content

feat(react): add WebGL and WebGPU renderer support#791

Open
theashraf wants to merge 3 commits intomainfrom
feat/react-webgl-webgpu-support
Open

feat(react): add WebGL and WebGPU renderer support#791
theashraf wants to merge 3 commits intomainfrom
feat/react-webgl-webgpu-support

Conversation

@theashraf
Copy link
Copy Markdown
Member

Description

Add WebGL and WebGPU renderer support to @lottiefiles/dotlottie-react via subpath exports, enabling hardware-accelerated rendering in React with zero bundle impact for existing Canvas 2D users.

New subpath exports:

  • @lottiefiles/dotlottie-react/webgl — WebGL renderer component
  • @lottiefiles/dotlottie-react/webgpu — WebGPU renderer component (with optional device prop)

Each renderer is lazy-loadable and brings its own WASM binary. The default import (@lottiefiles/dotlottie-react) remains unchanged — no new code or dependencies are pulled in for existing users.

Also revamps the React and Next.js example apps with a renderer selector to demonstrate all three backends, and strips the SSR setup from the React example (pure Vite SPA — SSR is covered by the Next.js example).

Package(s) affected

  • @lottiefiles/dotlottie-web (core)
  • @lottiefiles/dotlottie-react
  • @lottiefiles/dotlottie-vue
  • @lottiefiles/dotlottie-svelte
  • @lottiefiles/dotlottie-solid
  • @lottiefiles/dotlottie-wc

Type of change

  • Bug fix (non-breaking)
  • New feature (non-breaking)
  • Breaking change
  • Chore (build, CI, docs, refactor)

Checklist

  • Changes have been tested locally
  • Tests have been added or updated
  • Changeset has been added (if applicable)

Add new subpath exports to @lottiefiles/dotlottie-react for WebGL and
WebGPU renderers, enabling hardware-accelerated rendering in React with
zero bundle impact for existing Canvas 2D users.

- Add @lottiefiles/dotlottie-react/webgl subpath export
- Add @lottiefiles/dotlottie-react/webgpu subpath export (with optional device prop)
- Update build config with new entry points and exports map
- Revamp React and Next.js examples with renderer selector
- Strip SSR setup from React example (pure Vite SPA)
- Exclude dotlottie-rs from web package type-check
@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Apr 10, 2026

🦋 Changeset detected

Latest commit: bdeb187

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@lottiefiles/dotlottie-react Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 10, 2026

size-limit report 📦

Path Size Loading time (3g) Running time (snapdragon) Total time
@lottiefiles/dotlottie-web 26.25 KB (0%) 525 ms (0%) 18 ms (-52.54% 🔽) 543 ms
@lottiefiles/dotlottie-web WASM 484.79 KB (0%) 9.7 s (0%) 0 ms (+100% 🔺) 9.7 s
@lottiefiles/dotlottie-react 27.57 KB (0%) 552 ms (0%) 23 ms (+50.95% 🔺) 574 ms
@lottiefiles/dotlottie-vue 34.6 KB (0%) 692 ms (0%) 50 ms (+172.29% 🔺) 742 ms
@lottiefiles/dotlottie-wc 32.14 KB (0%) 643 ms (0%) 74 ms (+28.65% 🔺) 717 ms
@lottiefiles/dotlottie-svelte 36.54 KB (0%) 731 ms (0%) 13 ms (-38.37% 🔽) 744 ms
@lottiefiles/dotlottie-solid 32.97 KB (0%) 660 ms (0%) 10 ms (-57.81% 🔽) 669 ms

Add webpack alias to resolve react/react-dom from the app's own
node_modules, preventing the "invalid hook call" error caused by
two different React copies in the pnpm workspace.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants